畫面設計

畫面

這方面同樣是新手的我，腦袋裡面完全想不出該用什麼畫面去完成設定好的功能需求
那就先 "參考" 別人的作品作為方向吧！
Todo List React App | Part 1 - YouTube

工具

Figma

因為在 WeHelp 與六角的 工程師體驗營 有使用過 Figma 來看別人的作品，感覺應該不難...吧？
那就選了 Figma 吧！

上工

有了功能需求、參考的畫面、工具，迫不及待的就想把它實現出來了!
結果新建一個 Draft 對著空白的畫面馬上就愣了，怎麼搞？
對於 Figma 只是點擊查看，確實不會很難，但要用 Figma 來做出一個作品完全就是另一個世界了，難道我要先去 Hahow 買個課來上？
Hell No 我就是想做個簡單的畫面，作為前端開發畫面時的參考，所以決定先自行摸索想辦法把參考的作品畫出來。
好在 Figma 的使用者體驗設計的滿好的，如果只是簡單的形狀堆疊、改變文字、顏色、border 這些功能使用上都滿直覺，當然比較高級的用法還是會感到疑惑，比如說元件狀態管理，還好網路上資源相當多
Figma Dropdown - YouTube
FIGMA Component (Simple and Interactive) - YouTube
Figma 插件 Magician – Figma
之後就是邊做邊學，遇到問題就查，找到就用，實在沒有就想辦法土炮完成！

完工

花了兩天總算是總算是把畫面與基本流程給搞出來了！
在完成畫面的時候真的很有成就感，沒想到自己也能夠完成一個還算滿意的作品。
Todo list – Figma
▶ Page 1 - Todo list
當然後續在開發上因為各種原因還是有所改變，但大致上是以這個版面為主。

心得

最大的體會是在專案上，所有的學習都該是為了完成當前目標而學
因為 Figma 的功能非常豐富，要想都學會得花許多時間，但只需要在實作的過程中遇到問題了再去學就好，這種一步步完成的成就感，讓我在不知不覺中學會了基本的操作，也達成了目標！
就像前面分享過的 Day3：[心得]心得體悟：學習程式的方法 - iT 邦幫忙

每個階段，有每個階段適合的知識